<template>
  <div class="app">
    <!-- 顶部导航栏 -->
    <NavBar />
    <router-view>
      <template #default="{ Component }">
        <transition name="fade">
          <!-- 智能缓存控制 -->
          <keep-alive :include="keepAliveRouteNames">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </template>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouteCacheStore } from './store';
import NavBar from '@/components/NavBar.vue';

const routeCacheStore = useRouteCacheStore();

// 获取需要缓存的组件名列表
const keepAliveRouteNames = computed<any[]>(() => {
  return routeCacheStore.routeCaches;
});
</script>
<style lang="less" scoped>
.app {
  // height: 100vh;
  padding: 20px;
  background-color: #161730;
}
</style>
